﻿@page "/tests/utilities/object-fit"

<Row>
    <Column ColumnSize="ColumnSize.IsFull">
        <Card Margin="Margin.Is4.OnY">
            <CardHeader>
                <CardTitle>Examples</CardTitle>
            </CardHeader>
            <CardBody Padding="Padding.Is0.FromBottom">
                <Paragraph Margin="Margin.Is0.FromBottom">
                    Add the <Code>ObjectFit.{Value}</Code> class to the <Anchor To="https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element">replaced element</Anchor>:
                </Paragraph>
            </CardBody>
            <CardBody>
                <Div Flex="Flex.Row" Overflow="Overflow.Auto" Gap="Gap.Is3">
                    <Image Source="@imageSrcContain" Text="Placeholder : Object fit contain" ObjectFit="ObjectFit.Contain" Border="@border" Width="@width" Height="@height" />
                    <Image Source="@imageSrcCover" Text="Placeholder : Object fit cover" ObjectFit="ObjectFit.Cover" Border="@border" Width="@width" Height="@height" />
                    <Image Source="@imageSrcFill" Text="Placeholder : Object fit fill" ObjectFit="ObjectFit.Fill" Border="@border" Width="@width" Height="@height" />
                    <Image Source="@imageSrcScale" Text="Placeholder : Object fit scale" ObjectFit="ObjectFit.Scale" Border="@border" Width="@width" Height="@height" />
                    <Image Source="@imageSrcNone" Text="Placeholder : Object fit none" ObjectFit="ObjectFit.None" Border="@border" Width="@width" Height="@height" />
                </Div>
            </CardBody>
        </Card>
    </Column>
</Row>

<Row>
    <Column ColumnSize="ColumnSize.IsFull">
        <Card Margin="Margin.Is4.OnY">
            <CardHeader>
                <CardTitle>Responsive</CardTitle>
            </CardHeader>
            <CardBody Padding="Padding.Is0.FromBottom">
                <Paragraph Margin="Margin.Is0.FromBottom">
                    Responsive variations also exist for each <Code>ObjectFit</Code> value using the format <Code>ObjectFit.{Value}.{Breakpoint}</Code>, for the following breakpoint abbreviations: <Code>OnMobile</Code>, <Code>OnTablet</Code>, <Code>OnDesktop</Code>, <Code>OnWidescreen</Code>, <Code>OnFullHD</Code>, <Code>OnQuadHD</Code>. Classes can be combined for various effects as you need.
                </Paragraph>
            </CardBody>
            <CardBody>
                <Div Flex="Flex.Row" Overflow="Overflow.Auto" Gap="Gap.Is3">
                    <Image Source="@imageSrcContain" Text="Placeholder : Contain on xs" ObjectFit="ObjectFit.Contain.OnMobile" Border="@border" Width="@width" Height="@height2" />
                    <Image Source="@imageSrcContain" Text="Placeholder : Contain on sm" ObjectFit="ObjectFit.Contain.OnTablet" Border="@border" Width="@width" Height="@height2" />
                    <Image Source="@imageSrcContain" Text="Placeholder : Contain on md" ObjectFit="ObjectFit.Contain.OnDesktop" Border="@border" Width="@width" Height="@height2" />
                    <Image Source="@imageSrcContain" Text="Placeholder : Contain on lg" ObjectFit="ObjectFit.Contain.OnWidescreen" Border="@border" Width="@width" Height="@height2" />
                    <Image Source="@imageSrcContain" Text="Placeholder : Contain on xl" ObjectFit="ObjectFit.Contain.OnFullHD" Border="@border" Width="@width" Height="@height2" />
                    <Image Source="@imageSrcContain" Text="Placeholder : Contain on xxl" ObjectFit="ObjectFit.Contain.OnQuadHD" Border="@border" Width="@width" Height="@height2" />
                </Div>
            </CardBody>
        </Card>
    </Column>
</Row>

@code {
    IFluentSizing width = Width.Px( 140 );
    IFluentSizing height = Height.Px( 120 );
    IFluentSizing height2 = Height.Px( 80 );
    IFluentBorder border = Border.Is1.Rounded;
    string imageSrcContain = "_content/Blazorise.Demo/img/placeholders/objectfit-contain.svg";
    string imageSrcCover = "_content/Blazorise.Demo/img/placeholders/objectfit-cover.svg";
    string imageSrcFill = "_content/Blazorise.Demo/img/placeholders/objectfit-fill.svg";
    string imageSrcScale = "_content/Blazorise.Demo/img/placeholders/objectfit-scale.svg";
    string imageSrcNone = "_content/Blazorise.Demo/img/placeholders/objectfit-none.svg";
}
